<template>
    <div class="app-container">
        <el-card>
            <el-page-header @back="goBack">
                <template #content>
                    <div class="flex items-center" style="display:flex; justify-content:space-between;">
                        <div style="display: flex; align-items: center;">
                            <div>
                                <!-- {{ route.query.id ? '编辑客户' : '新增客户' }} -->
                                {{ route.query.readonly ? '查看客户' : route.query.id ? '编辑客户' : '新增客户' }}
                            </div>
                            <el-tag v-if="route.query.code" :type="tagType" style="margin-left: 10px;">{{ route.query.code
                            }}</el-tag>
                        </div>
                    </div>
                </template>
                <template #extra>
                    <div>
                        <el-button v-if="!readonly" class="button" type="primary" @click="handleSubmit"> 保 存
                        </el-button>
                    </div>
                </template>
            </el-page-header>
        </el-card>
        <el-card style="margin-top: 10px;">
            <el-collapse v-model="activeNames">
                <el-collapse-item disabled title="基本信息" name="1">
                    <template #title>
                        <el-icon style="color: #4479F6;">
                            <Position />
                        </el-icon> <span class="title">基本信息</span>
                    </template>
                    <div>
                        <el-form :model="form" :rules="rules" :disabled="Boolean(readonly)" ref="customerRef"
                            label-width="100px">
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="客户名称" prop="name">
                                        <el-input v-model="form.name" placeholder="请输入客户名称" maxlength="30"
                                            style="width: 100%;" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="客户类型" prop="ctype">
                                        <el-select v-model="form.ctype" class="m-2" placeholder="选择客户类型"
                                            style="width: 100%;">
                                            <el-option v-for="item in mes_custom_ctype" :key="item.value"
                                                :label="item.label" :value="item.value" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="客户简称" prop="shorter">
                                        <el-input v-model="form.shorter" placeholder="请输入客户简称" style="width: 100%;" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="客户渠道" prop="channel">
                                        <el-select v-model="form.channel" class="m-2" placeholder="选择客户渠道"
                                            style="width: 100%;">
                                            <el-option v-for="item in mes_custom_channel" :key="item.value"
                                                :label="item.label" :value="item.value" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="所属部门" prop="dept">
                                        <el-input v-model="form.dept" placeholder="请输入所属部门" maxlength="30"
                                            style="width: 100%;" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="所属地区" prop="area">
                                        <el-cascader v-model="form.area" :props="{
                                            value: 'label',
                                            label: 'label'
                                        }" :options="jsonData" @change="handleChange" style="width: 100%;" />

                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="业务专员">
                                        <el-input v-model="form.person" @click="handlePerson" placeholder="请输入业务专员"
                                            style="width: 100%;" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="公司电话" prop="tel">
                                        <el-input v-model="form.tel" placeholder="请输入公司电话" style="width: 100%;"
                                            maxlength="18" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="主联系人">
                                        <el-input v-model="form.contacts" placeholder="请输入主联系人" maxlength="30"
                                            style="width: 100%;" />
                                    </el-form-item>
                                </el-col>

                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="联系电话" prop="phone">
                                        <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="18"
                                            style="width: 100%;" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="最终结余">
                                        <el-input v-model="form.totalAmountArrears"  disabled maxlength="30"  style="width: 100%;" />
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="24">
                                    <el-form-item label="备注">
                                        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"
                                            style="width: 100%;"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                </el-collapse-item>
            </el-collapse>

            <el-collapse v-model="activeNames">
                <el-collapse-item disabled  title="基本信息" name="1">
                    <template #title>
                        <el-icon style="color: #4479F6;">
                            <Position />
                        </el-icon> <span class="title">结算明细</span>
                    </template>
                    <div>
                        <el-form ref="finalStatementForm" :model="mesWastesettleDetailList">
                            <el-table :data="mesWastesettleDetailList" :summary-method="getSummaries" show-summary border style="width: 100%"
                                      :header-cell-class-name="must">
                                <el-table-column type="index" label="序号" width="60" align="center" />
                                <el-table-column label="结算单编号编码" align="center" prop="code" >
                                <template v-slot="{ row }">
                                    <el-button type="primary" @click="handleView(row)" text>{{ row.code
                                        }}</el-button>
                                </template>
                                </el-table-column>
                                <el-table-column label="上次结余" align="center" prop="amountArrears" />
                                <el-table-column label="结算金额" align="center" prop="amount" />
                                <el-table-column label="本次结余" align="center" prop="totalAmountArrears" />
                                <el-table-column label="结算人" align="center" prop="updateBy" />
                                <el-table-column label="备注" align="center" prop="remark" />
                            </el-table>
                        </el-form>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </el-card>
        <el-dialog v-model="dialogFormVisible" title="选择人员" width="60%">
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="员工编码" prop="name">
                        <el-input v-model="queryParams.code" placeholder="请输入员工编码"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="queryParams.name" placeholder="请输入员工姓名"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-table :data="personData" border @row-click="handlePush" style="width: 100%">
                <el-table-column prop="code" label="员工编码" align="center" />
                <el-table-column prop="name" label="姓名" align="center" />
                <el-table-column prop="telephone" label="联系方式" align="center" />
            </el-table>
            <div class="footer">
                <pagination style="margin-top: 0;padding-top: 0;" v-show="total > 0" :total="total"
                    v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
            </div>

        </el-dialog>
    </div>
</template>

<script setup>
import { computed } from 'vue';

import useTagsViewStore from '@/store/modules/tagsView'
const tagsViewStore = useTagsViewStore()
import { updateCustom, addCustom, getCustom } from '@/api/basicInfo/customer.js'
import { getMesUserInfo } from '@/api/basicInfo/personnel'
const { proxy } = getCurrentInstance();
const { mes_custom_ctype, mes_custom_channel } = proxy.useDict('mes_custom_ctype', 'mes_custom_channel');
import jsonData from '@/utils/city.json';
import { ElMessage } from 'element-plus'
const router = useRouter();
const route = useRoute();
const activeNames = ['1']
const customerRef = ref(null)
const dialogFormVisible = ref(false)
const personData = ref([])
const total = ref(0)
const readonly = ref(false)
const mesWastesettleDetailList = ref([])
const data = reactive({
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        code: undefined,
        name: undefined
    },
    form: {},
    rules: {
        name: [{ required: true, message: "客户名称不能为空", trigger: "blur" }, { min: 2, max: 20, message: "客户名称长度必须介于 2 和 20 之间", trigger: "blur" }],
        ctype: [{ required: true, message: "客户类型不能为空", trigger: "blur" },],
        shorter: [{ required: true, message: "客户简称不能为空", trigger: ["blur", "change"] }],
        dept: [{ required: true, message: "所属部门不能为空", trigger: "blur" },],
        channel: [{ required: true, message: "客户渠道不能为空", trigger: "blur" },],
        area: [{ required: true, message: "所属地区不能为空", trigger: ["blur", "change"] }],
        phone: [{ required: false, message: "联系电话不能为空", trigger: "blur" }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
        tel: [{ required: false, message: "公司电话不能为空", trigger: "blur" }, { pattern: /^(?:(?:\d{3}-)?\d{8}|^(?:\d{4}-)?\d{7,8})(?:-\d+)?$/, message: "请输入正确的公司电话", trigger: "blur" }],
    },


});
const { form, rules, queryParams } = toRefs(data);
const tagType = computed(() => {
    return route.query.status == 0 ? '' : 'danger';
});
readonly.value = route.query.readonly
if (route.query.id) {
    getCustom(route.query.id).then(response => {
        response.data.ctype = response.data.ctype + ''
        response.data.channel = response.data.channel + ''
        response.data.area = response.data.area.split('/')
        form.value = response.data
        mesWastesettleDetailList.value = response.data.mesWastesettleDetailList

    })
} else {
    form.value = {}
}
const resetQuery = () => {
    queryParams.value.code = undefined
    queryParams.value.name = undefined
    handleQuery()
}
const handleQuery = () => {
    getMesUserInfo(queryParams.value).then(response => {
        total.value = response.total
        personData.value = response.rows.filter(item => {
            return item.joinPositionStatus == 1 || item.joinPositionStatus == 2
        })
    })
}
const getList = () => {
    getMesUserInfo(queryParams.value).then(response => {
        total.value = response.total
        personData.value = response.rows.filter(item => {
            return item.joinPositionStatus == 1 || item.joinPositionStatus == 2
        })
    }).catch(err => {
        loading.value = false
    })
}
const handlePerson = () => {
    getMesUserInfo(queryParams.value).then(response => {
        total.value = response.total
        personData.value = response.rows.filter(item => {
            return item.joinPositionStatus == 1
        })
    })
    dialogFormVisible.value = true
}
const handlePush = (row) => {
    form.value.person = row.name
    dialogFormVisible.value = false
    personData.value = []

}
const handleChange = (value) => {
}

// 查看结算明细
const handleView = (row) => {
    router.push({
        path: '/scrap/finalStatement/details',
        query: {
            id: row.id,
            readonly: true,
            code: row.code,
            status: row.status
        }
    })
}

//保存
const handleSubmit = () => {
    customerRef.value.validate((valid) => {
        if (valid) {
            const formData = form.value;
            formData.area = formData.area.join('/')
            if (formData.id) {
                updateCustom(formData).then(response => {
                    if (response.code === 200) {
                        ElMessage({
                            message: '编辑成功',
                            type: 'success',
                        });
                        goBack();
                    }
                })
            } else {
                formData.status = 0;
                addCustom(formData).then(response => {
                    if (response.code === 200) {
                        ElMessage({
                            message: '新增成功',
                            type: 'success',
                        });
                        goBack();
                    }
                })
            }
        }
    });
};

//  返回
const goBack = () => {
    tagsViewStore.delView(route)
    router.back()
}
</script>

<style lang="scss" scoped></style>